<template>
  <n-card :bordered="false" content-style="padding: 0">
    <n-form label-placement="left" :show-feedback="false">
      <n-grid :cols="4" x-gap="15">
        <n-form-item-grid-item label="主键">
          <n-input v-model:value="form.id" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="编码">
          <n-input v-model:value="form.code" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="名称">
          <n-input v-model:value="form.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="状态">
          <n-select v-model:value="form.status" :options="codeStore.getCodesByDict(_Dict.Status)" />
        </n-form-item-grid-item>
      </n-grid>
    </n-form>

    <n-card
      :bordered="false"
      content-style="padding: 15px 0; display: flex; justify-content: right;"
    >
      <n-space>
        <n-button type="info" @click="handleSelectOnClick">查询</n-button>
        <n-button type="info" @click="handleReset(form)">重置</n-button>
        <n-tooltip placement="bottom">
          <template #trigger>
            <n-icon size="28">
              <Settings />
            </n-icon>
          </template>
          列设置
        </n-tooltip>
      </n-space>
    </n-card>

    <n-data-table
      :row-key="(row: BaseMenuPO) => row.id"
      table-layout="fixed"
      :bordered="false"
      :loading="loading"
      :columns="columns"
      :data="records"
      @load="onLoad"
      :pagination="pagination"
    />
    <MenuModal
      :show="ModalData.show"
      :title="ModalData.title"
      :menu="ModalData.menu"
      :appId="ModalData.appId"
      @handleCloseOnClick="handleCloseOnClick"
      @handleSelectOnClick="handleSelectOnClick"
    />
  </n-card>
</template>
<script lang="ts" setup>
import { Settings } from '@vicons/carbon'
import { basicColumns } from './columns'
import { usePagination } from '@/hooks/usePagination'
import { getAppPage } from '@/api/base/App'
import { getMenuListByAppId, deleteMenu } from '@/api/base/Menu'
import MenuModal from './modal/MenuModal.vue'

const codeStore = useCodeStore()

const state = reactive({
  loading: false,
  form: {} as BaseAppPO,
  pagination: usePagination(handleSelectOnClick),
  records: [] as BaseMenuVO[],
  ModalData: {
    show: false,
    title: '',
    menu: {} as BaseMenuVO,
    appId: ''
  }
})

const { loading, form, records, pagination, ModalData } = toRefs(state)

const columns: ComputedRef<DataTableColumns<BaseMenuVO>> = computed(() => {
  const buttons = [{ label: '新增', onClick: handleInsertOnClick }]
  const leafButtons = [
    { label: '修改', onClick: handleUpdateOnClick },
    { label: '删除', onClick: handleDeleteOnClick }
  ]
  return [
    ...basicColumns,
    {
      title: '操作',
      key: 'actions',
      width: 200,
      render(row) {
        return !row.isLeaf
          ? createTableButtons<BaseMenuVO>(buttons, row)
          : createTableButtons<BaseMenuVO>(leafButtons, row)
      }
    }
  ]
})

onMounted(() => {
  handleSelectOnClick()
})

const onLoad = async (row: Record<string, any>) => {
  const { data } = await getMenuListByAppId(row.id)
  row.children = data.map((ele) => {
    return {
      ...ele,
      isLeaf: true
    }
  })
}

async function handleSelectOnClick() {
  state.loading = true
  const { data } = await getAppPage(state.pagination, state.form)
  const records = data.records.map((ele) => {
    return {
      id: ele.id,
      code: ele.code,
      name: ele.name,
      ordIdx: ele.ordIdx,
      status: ele.status,
      creator: ele.creator,
      createTime: ele.createTime,
      modifier: ele.modifier,
      modifyTime: ele.modifyTime,
      isLeaf: false
    } as BaseMenuVO
  })
  state.pagination.prefix = () => `总条数为${data.total}`
  state.records = records
  state.loading = false
}

const handleInsertOnClick = (app: BaseMenuVO) => {
  state.ModalData.appId = app.id
  state.ModalData.show = true
  state.ModalData.title = '新增'
}

const handleUpdateOnClick = (menu: BaseMenuVO) => {
  state.ModalData.menu = menu
  state.ModalData.show = true
  state.ModalData.title = '修改'
}

const handleDeleteOnClick = async (menu: BaseMenuVO) => {
  IConfirmMessage({
    content: '确认删除？',
    onPositiveClick: async () => {
      await deleteMenu(menu.id)
      handleSelectOnClick()
    }
  })
}

const handleCloseOnClick = () => {
  state.ModalData.appId = ''
  state.ModalData.menu = {} as BaseMenuVO
  state.ModalData.show = false
}
</script>
